<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>购物车</title>
	<link rel="stylesheet" type="text/css" href="${ctxStatic}/IDH/css/shop/shop_trolley.css" />
</head>
<body>
	<!-- header -->
	<%@ include file="/WEB-INF/views/modules/marketHeader.jsp"%>
	<!-- 主题内容 -->
	<form:form id="cartForm" modelAttribute="genCart" action="${ctxf}/front/cart/genCart/makeOrder" method="post" class="form-search">
		<form:hidden path="id" id="id"/>
	</form:form>
	<input id="navActive" value="4" type="hidden">   <!--导航高亮存值-->
	<section class="container content row" id="container">
		<div class="col-xs-12 col-md-12 mobile-padding-0">
			<div class="row">
			 	<div id="trolley" class="row col-md-12">
			 		<!-- 购物车头部 -->
			 		<div class="trolley-th">
			 			<ul class="row  hidden-xs">
			 				<li class="col-md-3">
			 					<input type="checkbox" class="th-checkbox" onclick="$('#checkbox_a4').click()"/>
			 					<span class="all-select">全选</span>
			 				</li>
			 				<li class="col-md-2">商品信息</li>
			 				<li class="col-md-1">单价</li>
			 				<li class="col-md-3">数量</li>
			 				<li class="col-md-2">小计</li>
			 				<li class="col-md-1">操作</li>
			 			</ul>
			 			<ul class="mobile-th visible-xs-block row">
			 				<li class="col-xs-9">
			 					<input type="checkbox" class="th-checkbox" onclick="$('#checkbox_a4').click()"/>
			 					<span class="">全选</span>
			 				</li>
			 				<li class="col-xs-3">
			 					<span id="operationButton" onclick="allPosTop()">编辑</span>
			 				</li>
			 			</ul>
			 		</div>
			 		<!-- 购物车主体 -->
			 		<c:set var="sum" value="0"></c:set>
			 		<div class="trolley-orders">
			 			<c:forEach items="${carts }" var="genCart">
				 			<ul class="row">
				 				<li class="col-xs-4 col-md-3 order-first-li">
				 					<input type="checkbox" id="${genCart.id }" name="checkbox_a2" class="orders-checkbox" value="${genCart.id }"/>
				 					<div class="order-imgbox"><img src="${path }${genCart.picture }"></div>
								</li>
								<!-- pc端 -->
				 				<li class="hidden-xs col-md-2">
				 					<labal>${genCart.productName }</labal>
				 					<p>商品编号：${genCart.code }</p>
				 				</li>
				 				<li class="col-md-1 hidden-xs"><span class="font-bold">¥${genCart.price2 }</span></li>
				 				<li class="col-md-3 hidden-xs">
				 					<button class="num-a" onclick="reduce('${genCart.id }','${genCart.stock }','${genCart.price2 }')">-</button>
				 					<input class="num-input num${genCart.id }" id="pc_num${genCart.id }" onblur="buyNumPc('${genCart.id }','${genCart.stock }','${genCart.price2 }','${genCart.amt }');" value="${genCart.amt }">
				 					<button class="num-a" onclick="plus('${genCart.id }','${genCart.stock }','${genCart.price2 }')">+</button>
			 						<c:if test="${genCart.amt > genCart.genProduct.stock }">
						 				<span class="color-red total${genCart.id }" name="totalSingle">库存不足</span>
				 					</c:if>
			 					</li>
			 					
				 				<li class="hidden-xs col-md-2">
				 					<span class="color-red">¥<label id="total${genCart.id }" name="totalSingle">${genCart.amt*genCart.price2 }</label></span>
				 					<c:set var="sum" value="${sum + genCart.amt * genCart.price2 }"></c:set>
			 					</li>
				 				<li class="col-md-1 hidden-xs">
				 					<a href="#" onclick="singleDelCarOrder('${genCart.id }')"">删除</a>
				 				</li>
				 				<!-- 移动端 -->
				 				<li class="col-xs-8 mobile-li visible-xs-block">
				 					<ul>
				 						<li>
						 					<labal>${genCart.productName }</labal>
						 					<p>商品编号：${genCart.code }</p>
						 					<c:if test="${genCart.amt > genCart.genProduct.stock }">
								 				<p class="total${genCart.id }" style="color:red;font-weight:700;">库存不足</p>
						 					</c:if>
						 				</li>
						 				<li>
						 					<div class="color-red">¥<span id="totalMobile${genCart.id }" name="totalSingle">${genCart.amt*genCart.price2 }</span></div>
						 					<div class="num-mobile visible-xs-block">x<span id="numMobile${genCart.id }">${genCart.amt }</span></div>
						 				</li>
						 				<li>
						 					<button class="num-a" onclick="reduce('${genCart.id }','${genCart.stock }','${genCart.price2 }')">-</button>
						 					<input class="num-input num${genCart.id }" id="phone_num${genCart.id }" onblur="buyNumPhone('${genCart.id }','${genCart.stock }','${genCart.price2 }','${genCart.amt }');" value="${genCart.amt }">
						 					<button class="num-a" onclick="plus('${genCart.id }','${genCart.stock }','${genCart.price2 }')">+</button>
					 					</li>
					 					<li>
						 					<a href="#" onclick="singleDelCarOrder('${genCart.id }')"">删除</a>
						 				</li>
				 					</ul>
				 				</li>
				 			</ul>
			 			</c:forEach>
			 		</div>
			 		<!-- 底部购买信息 -->
			 		<div class="trolley-operation">
			 			<!-- pc端 -->
			 			<ul class="row hidden-xs">
			 				<li class="col-md-3">
			 					<input type="checkbox"  id="checkbox_a4" class="th-checkbox " onclick="allSelect('checkbox_a4')"/>
			 					<span class="all-select">全选</span>
			 				</li>
			 				<li class="col-md-2"><a onclick="deleteSelect()">删除</a></li>
			 				<li class="col-md-2 text-right">已选商品<span class="color-red"><label class="totalNumber">0</label></span>件</li>
			 				<li class="col-md-2 text-right">合计<span class="color-red ">¥<label class="totalMoney">0</label></span></li>
			 				<li class="col-md-3 text-right"><button class="buy-button" onclick="placeOrder()">立刻结算</button></li>
			 			</ul>
			 			<!-- 手机端 -->
			 			<ul class="row visible-xs-block">
			 				<li>
			 					<input type="checkbox" class="th-checkbox" onclick="$('#checkbox_a4').click()"/>
			 					<label for="checkbox_a4"></label>
			 					<span class="all-select">全选</span>
			 				</li>
			 				<li>已选商品<span class="color-red"><label class="totalNumber">0</label></span>件</li>
			 				<li>合计<span class="color-red ">¥<label class="totalMoney">0</label></span></li>
			 				<li class=" pull-right"><button class="buy-button-mobile" onclick="placeOrder()">立刻结算</button></li>
			 			</ul>
			 		</div>
			 	</div>
			</div>
		</div>
	</section>
	<!-- footer -->
	<%@ include file="/WEB-INF/views/modules/marketFooter.jsp"%>
</body>
<script type="text/javascript">
	$li = $(".mobile-li");
	var move;
	
	$(document).ready(function(){
		numMoney();
		if ("${message}" != "") {
			layer.msg('${message}');
		}
	})
	
	function placeOrder(){
		var productidChecked = $('input[name="checkbox_a2"]:checked') ;
		if (productidChecked.length == 0) {
			layer.open({title: '提示', content: '请选择商品！', icon: 0});
			return false;
		}
		var productIdCheckedStr = [];
		for (var i = 0; i < productidChecked.length; i ++) {
			productIdCheckedStr.push(productidChecked[i].value);
		}
		$("#id").val(productIdCheckedStr.toString());
		window.location.href="${ctxf}/front/cart/genCart/makeOrder?id=" + productIdCheckedStr.toString();
	}
	/*购买数量*/
	function plus(id,stock,price) {
		var num = $(".num" + id).val();
		if (parseInt(num) < parseInt(stock)) {
			$.ajax({
				type:"POST",
				data:{id:id},
				async: false,
				url: "${ctxf}/front/cart/genCart/plus",
				dataType:"json",
				success:function(msg){
					
				},
				error:function() {}
			});
			$(".num" + id).val(parseInt(++num));
			
			$("#numMobile" + id).text($(".num" + id).val())
			$("#total" + id).html((parseInt($(".num" + id).val()) * parseFloat(price)).toFixed(2));
			$("#totalMobile" + id).html((parseInt($(".num" + id).val()) * parseFloat(price)).toFixed(2));
			numMoney();
		}else{
			layer.open({title: '提示', content: '商品数量不能大于' + stock, icon: 0});
		}
	}


	function reduce(id,stock,price) {
		var num = $(".num" + id).val();
		if (parseInt(num) > 1) {
			$.ajax({
				type:"POST",
				data:{id:id},
				async: false,
				url: "${ctxf}/front/cart/genCart/reduce",
				dataType:"json",
				success:function(msg){
					
				},
				error:function() {}
			});
			$(".num" + id).val(parseInt(--num));
			
			if(parseInt(stock) >= parseInt($(".num" + id).val())){
				$(".total" + id).html("");
			}
			$("#numMobile" + id).text($(".num" + id).val())
			
			$("#total" + id).html((parseInt($(".num" + id).val()) * parseFloat(price)).toFixed(2));
			$("#totalMobile" + id).html((parseInt($(".num" + id).val()) * parseFloat(price)).toFixed(2));
			numMoney();
		}else{
			layer.open({title: '提示', content: '商品数量不能小于1', icon: 0});
		}
	}
	
	/* 全选 */
	function allSelect(id){
	    if($("#" + id).prop("checked")){
	        $(".orders-checkbox").each(function(){
	             $(this).prop("checked",'checked');
	        }); 
	        $(".th-checkbox").prop("checked",'checked');
        }
	    else{
	        $(".orders-checkbox").each(function(){
	             $(this).removeAttr("checked");
	        });
	        $(".th-checkbox").removeAttr("checked");
	    }
	    numMoney();
	}

	$('input[name="checkbox_a2"]').click(function() {
		var length = $('input[name="checkbox_a2"]:checked').length;
		var length2 = $('input[name="checkbox_a2"]').length;
		if (length == length2) {
			$(".th-checkbox").prop("checked",true);
		} else {
			$(".th-checkbox").prop("checked",false);
		}
		numMoney();
		
	});
	
	/* 计算总计和商品个数 */
	function numMoney(){
		var checkedProduct = $('input[name="checkbox_a2"]:checked');
		var totalMoney = 0;
		var pcSelectProductNumber = 0;
		var phoneSelectProductNumber = 0;
		for (var i = 0; i < checkedProduct.length; i++) {
			totalMoney = parseFloat(totalMoney) +  parseFloat($("#total"+$(checkedProduct[i]).attr("id")).html());
			pcSelectProductNumber = parseInt(pcSelectProductNumber) +  parseInt($("#pc_num"+$(checkedProduct[i]).attr("id")).val());
			//phoneSelectProductNumber = parseInt(phoneSelectProductNumber) +  parseInt($("#phone_num"+$(checkedProduct[i]).attr("id")).val());
		}
		
		$(".totalMoney").html(totalMoney.toFixed(2))
		$(".totalNumber").html(pcSelectProductNumber);
	}
	

	/* 编辑按钮 */
	function allPosTop(){
		if($("#operationButton").text() == "编辑"){
			$("#operationButton").text("完成");
			$li.find("ul").each(function (){
				$(this).addClass("pos-bottom");
			})
		}else{
			$("#operationButton").text("编辑")
			$li.find("ul").each(function (){
				$(this).removeClass("pos-bottom");
			})
		}
	}
	
	/* 删除选中 */
	function deleteSelect(){
		var isSelected = false;
		var id = "";
		var inputLength = $('input[name="checkbox_a2"]').length;
		$('input[name="checkbox_a2"]:checked').each(function(){
			if('input[name="checkbox_a2"]:checked'){
				isSelected = true;
				id += $(this).val() + ",";
			}
		})
		if(isSelected){
			layer.confirm('确定要删除数据吗？', {
				  title: '提示',
				  btn: ['确定','取消'] //按钮
				}, function(){
					window.location.href="${ctxf}/front/cart/genCart/deleteByIds?ids=" + id;
				}, function(){});
		}else{
			if(inputLength > 0){
				layer.msg('请选择要删除的商品！');
			}else{
				layer.msg('购物车无商品！');
			}
		}
	}
	
	/* 单个删除 */
	function singleDelCarOrder(id){
		layer.confirm('确认删除此商品吗？', {
			  title: '提示',
			  btn: ['确定','取消'] //按钮
			}, function(){
				window.location.href="${ctxf}/front/cart/genCart/deleteByIds?ids=" + id;
			}, function(){
			 /*  layer.msg('也可以这样', {
			    time: 20000, //20s后自动关闭
			    btn: ['明白了', '知道了']
			  }); */
			});
	}
	
	
	/*pc 手动输入数量 */
	function buyNumPc(id,stock,price,oldNum){
		
		var num = /^[1-9]\d*$/;
		var url = "${ctxf}/front/cart/genCart/inputNum";
		var inputBuyNum = $("#pc_num"+ id).val().trim();
		if(!num.test( inputBuyNum )){
			layer.open({title: '提示', content: '请输入整数', icon: 0});
			$("#phone_num"+ id).val(oldNum);
			$("#pc_num"+ id).val(oldNum);
		}else if(parseInt( inputBuyNum ) <= parseInt( stock )){
			$.ajax({
				type:"POST",
				data:{id:id,amt:inputBuyNum},
				async: false,
				url: url,
				dataType:"json",
				success:function(msg){
					
				},
				error:function() {}
			});
			$("#phone_num"+ id).val(inputBuyNum);
			$("#pc_num"+ id).val(inputBuyNum);
			$("#numMobile" + id).text(inputBuyNum);
			$("#total" + id).html(parseInt(inputBuyNum) * parseFloat(price));
			$("#totalMobile" + id).html(parseInt(inputBuyNum) * parseFloat(price));
			numMoney();
		}else if(parseInt( inputBuyNum ) > parseInt( stock ) || parseInt( inputBuyNum ) < 1){
			layer.open({title: '提示', content: '库存不足', icon: 0});
			$("#phone_num"+ id).val(oldNum);
			$("#pc_num"+ id).val(oldNum);
			numMoney();
		}
	}
	/*phone 手动输入数量 */
	function buyNumPhone(id,stock,price,oldNum){
		var num = /^[1-9]\d*$/;
		var url = "${ctxf}/front/cart/genCart/plus";
		var inputBuyNum = $("#phone_num"+ id).val().trim();
		if(!num.test( inputBuyNum )){
			layer.open({title: '提示', content: '请输入整数', icon: 0});
			$("#phone_num"+ id).val(oldNum);
			$("#pc_num"+ id).val(oldNum);
		}else if(parseInt( inputBuyNum ) <= parseInt( stock )){
			if(inputBuyNum <= oldNum){
				url = "${ctxf}/front/cart/genCart/reduce";
			}
			
			$.ajax({
				type:"POST",
				data:{id:id},
				async: false,
				url: url,
				dataType:"json",
				success:function(msg){
					
				},
				error:function() {}
			});
			$("#phone_num"+ id).val(inputBuyNum);
			$("#pc_num"+ id).val(inputBuyNum);
			$("#numMobile" + id).text(inputBuyNum);
			$("#total" + id).html(parseInt(inputBuyNum) * parseFloat(price));
			$("#totalMobile" + id).html(parseInt(inputBuyNum) * parseFloat(price));
			numMoney();
		}else if(parseInt( inputBuyNum ) > parseInt( stock ) || parseInt( inputBuyNum ) < 1){
			layer.open({title: '提示', content: '库存不足', icon: 0});
			$("#phone_num"+ id).val(oldNum);
			$("#pc_num"+ id).val(oldNum);
			numMoney();
		}
	}
	
	/*function height(){
		//页面最小高度
		var height = $(window).height();
		var width = $(window).width();
		if(width > 640){
			$("#container").css("min-height",height - 491);
		}else if(width == 320){
			$("#container").css("min-height",height - 288);
		}else if(width == 375){
			$("#container").css("min-height",height - 323);
		}else{
			$("#container").css("min-height",height - 348);
		}
	}*/
	/* $(window).resize(function(){
	   height()
	}); */
</script>
</html>